<style lang="scss" scoped>
/deep/.el-table {
    & .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: transparent !important;
    }
    & .scroll-y::-webkit-scrollbar,
    .scroll-x::-webkit-scrollbar {
        background: transparent !important;
    }
    & .scroll-y::-webkit-scrollbar-track,
    .scroll-x::-webkit-scrollbar-track {
        background: transparent !important;
    }
    & .scroll-y::-webkit-scrollbar-thumb,
    .scroll-x::-webkit-scrollbar-thumb {
        background-color: transparent !important;
    }
    &:hover .scroll-y::-webkit-scrollbar-thumb,
    &:hover .scroll-x::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
}
</style>
<template>
    <ui-main :title="$route.name">
        <div class="item one">
            <div class="pos-a h-100p w-100p">
                <el-table
                    border
                    :data="tableData5"
                    v-table-scroll
                    ref="table"
                    show-summary
                    :height="300"
                    style="width: 100%;"
                    @expand-change="showRowDetail"
                >
                    <el-table-column type="expand" fixed>
                        <template slot-scope="props">
                            <el-form
                                label-position="left"
                                class="demo-table-expand"
                            >
                                <el-form-item label="商品名称">
                                    <div>{{ props.row.name }}</div>
                                </el-form-item>
                                <el-form-item label="所属店铺">
                                    <div>{{ props.row.shop }}</div>
                                </el-form-item>
                                <el-form-item label="商品 ID">
                                    <div>{{ props.row.id }}</div>
                                </el-form-item>
                                <el-form-item label="店铺 ID">
                                    <div>{{ props.row.shopId }}</div>
                                </el-form-item>
                                <el-form-item label="商品分类">
                                    <div>{{ props.row.category }}</div>
                                </el-form-item>
                                <el-form-item label="店铺地址">
                                    <div>{{ props.row.address }}</div>
                                </el-form-item>
                                <el-form-item label="商品描述">
                                    <div>{{ props.row.desc }}</div>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="商品 ID"
                        fixed
                        prop="id"
                    ></el-table-column>
                    <el-table-column
                        label="商品 ID"
                        prop="id"
                    ></el-table-column>
                    <el-table-column
                        label="商品名称"
                        prop="name"
                        width="200px"
                    ></el-table-column>
                    <el-table-column
                        label="商品名称"
                        prop="name"
                        width="200px"
                    ></el-table-column>
                    <el-table-column
                        label="商品名称"
                        prop="name"
                        width="200px"
                    ></el-table-column>
                    <el-table-column
                        label="商品名称"
                        prop="name"
                        width="200px"
                    ></el-table-column>
                    <el-table-column
                        label="商品名称"
                        prop="name"
                        width="200px"
                    ></el-table-column>
                    <el-table-column
                        label="描述"
                        prop="desc"
                        fixed="right"
                        width="200px"
                    ></el-table-column>
                    <el-table-column
                        label="操作"
                        prop="desc"
                        align="center"
                        fixed="right"
                        width="100px"
                    >
                        <el-button @click="click1">1</el-button>
                    </el-table-column>
                </el-table>
                <el-button @click="add">+</el-button>
                <el-button @click="reduce">-</el-button>
            </div>
        </div>
        <div class="item one">
            <ui-load-md file="./adaptiveTable.md"></ui-load-md>
        </div>
    </ui-main>
</template>
<script>
export default {
    data() {
        return {
            tableData5: []
        };
    },
    mounted() {
        setTimeout(() => {
            for (let i = 0, len = 15; i < len; i++) {
                this.tableData5.push({
                    id: i,
                    name: "好滋好味鸡蛋仔",
                    category: "江浙小吃、小吃零食",
                    desc: "荷兰优质淡奶，奶香浓而不腻",
                    address: "上海市普陀区真北路",
                    shop: "王小虎夫妻店",
                    shopId: "10333"
                });
            }
            this.$nextTick(() => {
                this.$refs.table.doLayout();
            });
        }, 1000);
    },

    methods: {
        handleNodeClick(data) {
            this.log(data);
        },
        showRowDetail(data) {
            // console.log(data);
        },
        add() {
            this.tableData5.push({
                id: this.tableData5.length,
                name: "好滋好味鸡蛋仔",
                category: "江浙小吃、小吃零食",
                desc: "荷兰优质淡奶，奶香浓而不腻",
                address: "上海市普陀区真北路",
                shop: "王小虎夫妻店",
                shopId: "10333"
            });
        },
        reduce() {
            this.tableData5.pop();
        },
        click1() {
            console.log(1);
        }
    }
};
</script>
